import React from 'react';
import { Form, Select, InputNumber, Input, Switch, Card, Row, Col, Space, Typography } from 'antd';
import { WordExportOptions } from '../../../services/export/types';

const { Title, Text } = Typography;

interface WordExportConfigProps {
  options: WordExportOptions;
  onChange: (options: WordExportOptions) => void;
  filename: string;
  onFilenameChange: (filename: string) => void;
  disabled?: boolean;
}

export const WordExportConfig: React.FC<WordExportConfigProps> = ({
  options,
  onChange,
  filename,
  onFilenameChange,
  disabled = false
}) => {
  const handleFieldChange = (field: keyof WordExportOptions, value: any) => {
    onChange({
      ...options,
      [field]: value
    });
  };

  const handleMarginChange = (side: keyof WordExportOptions['margins'], value: number) => {
    onChange({
      ...options,
      margins: {
        ...options.margins,
        [side]: value
      }
    });
  };

  const handleHeaderFooterChange = (type: 'header' | 'footer', value: string) => {
    const headerFooter = options.headerFooter || {};
    onChange({
      ...options,
      headerFooter: {
        ...headerFooter,
        [type]: value || undefined
      }
    });
  };

  return (
    <div>
      <Form layout="vertical" disabled={disabled}>
        {/* 基本设置 */}
        <Card title="基本设置" size="small" style={{ marginBottom: 16 }}>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="文件名" required>
                <Input
                  value={filename}
                  onChange={(e) => onFilenameChange(e.target.value)}
                  placeholder="请输入文件名"
                  suffix=".docx"
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="文档模板">
                <Select
                  value={options.template}
                  onChange={(value) => handleFieldChange('template', value)}
                >
                  <Select.Option value="standard">标准模板</Select.Option>
                  <Select.Option value="formal">正式模板</Select.Option>
                  <Select.Option value="creative">创意模板</Select.Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
        </Card>

        {/* 字体设置 */}
        <Card title="字体设置" size="small" style={{ marginBottom: 16 }}>
          <Row gutter={16}>
            <Col span={8}>
              <Form.Item label="字体族">
                <Select
                  value={options.fontFamily}
                  onChange={(value) => handleFieldChange('fontFamily', value)}
                >
                  <Select.Option value="SimSun">宋体</Select.Option>
                  <Select.Option value="SimHei">黑体</Select.Option>
                  <Select.Option value="Microsoft YaHei">微软雅黑</Select.Option>
                  <Select.Option value="KaiTi">楷体</Select.Option>
                  <Select.Option value="FangSong">仿宋</Select.Option>
                  <Select.Option value="Times New Roman">Times New Roman</Select.Option>
                  <Select.Option value="Arial">Arial</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="字体大小">
                <InputNumber
                  value={options.fontSize}
                  onChange={(value) => handleFieldChange('fontSize', value || 12)}
                  min={8}
                  max={72}
                  step={1}
                  addonAfter="pt"
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="行间距">
                <Select
                  value={options.lineSpacing}
                  onChange={(value) => handleFieldChange('lineSpacing', value)}
                >
                  <Select.Option value={1.0}>单倍行距</Select.Option>
                  <Select.Option value={1.15}>1.15倍行距</Select.Option>
                  <Select.Option value={1.5}>1.5倍行距</Select.Option>
                  <Select.Option value={2.0}>双倍行距</Select.Option>
                  <Select.Option value={2.5}>2.5倍行距</Select.Option>
                  <Select.Option value={3.0}>三倍行距</Select.Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
        </Card>

        {/* 页边距设置 */}
        <Card title="页边距设置" size="small" style={{ marginBottom: 16 }}>
          <Row gutter={16}>
            <Col span={6}>
              <Form.Item label="上边距">
                <InputNumber
                  value={options.margins.top}
                  onChange={(value) => handleMarginChange('top', value || 25.4)}
                  min={0}
                  max={100}
                  step={1}
                  addonAfter="mm"
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label="右边距">
                <InputNumber
                  value={options.margins.right}
                  onChange={(value) => handleMarginChange('right', value || 25.4)}
                  min={0}
                  max={100}
                  step={1}
                  addonAfter="mm"
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label="下边距">
                <InputNumber
                  value={options.margins.bottom}
                  onChange={(value) => handleMarginChange('bottom', value || 25.4)}
                  min={0}
                  max={100}
                  step={1}
                  addonAfter="mm"
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label="左边距">
                <InputNumber
                  value={options.margins.left}
                  onChange={(value) => handleMarginChange('left', value || 25.4)}
                  min={0}
                  max={100}
                  step={1}
                  addonAfter="mm"
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Col>
          </Row>
        </Card>

        {/* 高级选项 */}
        <Card title="高级选项" size="small">
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item>
                <Space direction="vertical" style={{ width: '100%' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <Text>包含目录</Text>
                    <Switch
                      checked={options.includeTableOfContents}
                      onChange={(checked) => handleFieldChange('includeTableOfContents', checked)}
                    />
                  </div>
                  <Text type="secondary" style={{ fontSize: '12px' }}>
                    自动生成文档目录（基于标题结构）
                  </Text>
                </Space>
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={16} style={{ marginTop: 16 }}>
            <Col span={12}>
              <Form.Item label="页眉文字" help="在每页顶部添加页眉">
                <Input
                  value={options.headerFooter?.header || ''}
                  onChange={(e) => handleHeaderFooterChange('header', e.target.value)}
                  placeholder="可选，留空则不添加页眉"
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="页脚文字" help="在每页底部添加页脚，支持 {PAGE} 和 {NUMPAGES} 变量">
                <Input
                  value={options.headerFooter?.footer || ''}
                  onChange={(e) => handleHeaderFooterChange('footer', e.target.value)}
                  placeholder="如：第 {PAGE} 页 共 {NUMPAGES} 页"
                />
              </Form.Item>
            </Col>
          </Row>
        </Card>
      </Form>

      {/* 预览信息 */}
      <Card size="small" style={{ marginTop: 16, backgroundColor: '#f8f9fa' }}>
        <Title level={5} style={{ margin: '0 0 8px 0' }}>导出预览</Title>
        <Space direction="vertical" size="small">
          <Text type="secondary">
            模板: {options.template === 'standard' ? '标准模板' : options.template === 'formal' ? '正式模板' : '创意模板'}
          </Text>
          <Text type="secondary">
            字体: {options.fontFamily} {options.fontSize}pt
          </Text>
          <Text type="secondary">
            行间距: {options.lineSpacing}倍
          </Text>
          <Text type="secondary">
            页边距: 上{options.margins.top}mm 右{options.margins.right}mm 下{options.margins.bottom}mm 左{options.margins.left}mm
          </Text>
          {options.includeTableOfContents && (
            <Text type="secondary">
              包含目录: 是
            </Text>
          )}
          {options.headerFooter?.header && (
            <Text type="secondary">
              页眉: {options.headerFooter.header}
            </Text>
          )}
          {options.headerFooter?.footer && (
            <Text type="secondary">
              页脚: {options.headerFooter.footer}
            </Text>
          )}
        </Space>
      </Card>
    </div>
  );
};